<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>axios数据请求示例</title>
    <script src="../plugins/vue/vue.min.js"></script>
    <script src="../plugins/vue/axios.min.js"></script>


</head>
<body>
    <div id="app">
        <button @click="sendMsg">开始发送GET请求</button>

        <div v-for="item in list">
            {{item.userId}}---{{item.accountDesc}}----{{item.createTime}}
        </div>
        <hr/>
        <input v-model="user.name" placeholder="请输入用户名">
        <input v-model="user.pass" placeholder="请输入密码">
        <button @click="sendPostInfo">开始发送post请求</button>
    </div>

</body>

<script>
    new Vue({
        el:"#app",
        data:{
            list:[],
            user:{
                name:"",
                pass:""
            }//表示使用js定义了一个对象（类似于java对象）
        },
        methods:{
            sendMsg(){
                //在这里就可以开始使用axios进行数据发送请求的方法
                axios.get("/list").then(res=>{
                    // alert(JSON.stringify(res.data));
                    this.list = res.data;
                })
            },
            sendPostInfo(){
                //这个请求，就是通过post方式，将一个对象user的数据携带传给了后端
                axios.post("/sendPost",this.user).then(res=>{

                })
            }

        }
    })




</script>



</html>